<template>
	<view class="content">
		<u-navbar title="提货订单列表" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>

		<view class="inquire">
			<view class="inp">
				<input placeholderClass="placeholderStyle" placeholderStyle="placeholderStyle" shape="circle"
					:customStyle="inpCustomStyle" placeholder="请输入内容" border="surround" v-model="value" @change="change"></input>
			</view>
			<view class="btn">
				<button class="btnClass" color="#FF594D" text="查询">查询</button>
			</view>
			<view class="btn">
				<button color="#FF594D" class="btnClass" @click="navigateTo('/pages_mine/pages/pick_already/pick_already')"
					text="已提供列表">已提供列表</button>
			</view>
			<view class="btn">
				<button color="#FF594D" class="btnClass" text="近30天">近30天</button>
			</view>
		</view>
		<view class="tab">
			<u-tabs :activeStyle='activeColor' :inactiveStyle="inactiveStyle33" lineWidth='355rpx' lineHeight="4rpx"
				lineColor="#FF594D" :itemStyle="itemStyle" :list="list1" @click="tabClick"></u-tabs>
		</view>
		<view class="client_content">
			<view class="client_list">
				<view class="client_hade">
					<view class="">
						电话
					</view>
					<view class="">
						客户名称
					</view>
					<view class="">
						订单数量
					</view>
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="client_item">
					<view class="">
						13628042134
					</view>
					<view class="">
						王小二
					</view>
					<view class="goods_num">
						1
					</view>
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="client_item">
					<view class="">
						13628042133
					</view>
					<view class="">
						王小四
					</view>
					<view class="goods_num">
						2
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					color: '#fff'
				},
				value: '',
				inpCustomStyle: {
					"backgroundColor": '#f3f3f3',
					'height': '68rpx',
					'padding': 0,
					'paddingLeft': '30rpx',
					'border': 0,
					'fontSize': '26rpx',
					"boxSizing": "border-box"
				},
				placeholderStyle: {
					'color': '#fc7f76'

				},
				btnCustomStyle: {
					'borderRadius': '10rpx',
					'fontSize': '26rpx',
					'height': '56rpx',
					// 'padding': '11rpx 20rpx',
					"boxSizing": "border-box"
				},
				list1: [{
					name: '客户列表',
				}, {
					name: '发展中的客户列表',
				}],
				itemStyle: {
					width: '355rpx',
					height: '76rpx',
					margin: '0',
					padding: '0'
				},
				activeColor: {
					color: '#D54939',
					'font-weight': '800',
					'font-size': '26rpx',
				},
				inactiveStyle33: {
					color: '#777777',
					'font-size': '26rpx',
				},
			}
		},
		methods: {
			change(value) {
				console.log(value);
			},
			tabClick(item) {
				console.log(item);
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;

		.btnClass {
			border-radius: 10rpx;
			font-size: 26rpx;
			height: 56rpx;
			line-height: 56rpx;
			color: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #FF594D;
		}

		.line {
			padding: 20rpx 0;
		}

		.inquire {
			padding: 18rpx 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.placeholderStyle {
				color: #fc7f76;
			}

			.inp {
				width: 265rpx;
				height: 68rpx;
				background: #fff;
				display: flex;
				align-items: center;

				input {
					font-size: 26rpx;
					border-radius: 444rpx;
					background-color: #f3f3f3;
					box-sizing: border-box;
					padding-left: 20rpx;
				}
			}
		}

		.tab {
			padding: 0 20rpx;
			background-color: #fff;
		}

		.client_content {
			padding: 20rpx;

			.client_list {
				// width: 710rpx;
				background: #FFFFFF;

				padding: 20rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.client_hade {
				display: flex;
				align-items: center;

				view {
					width: 220rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
				}
			}

			.client_item {
				display: flex;
				align-items: center;

				view {
					width: 220rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #777777;
				}

				.goods_num {
					padding-left: 40rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>